<template>
  <div>
    <el-card class="card">
      <el-row style="text-align: left">
          <h2>编辑</h2>
      </el-row>
      <el-row>
          <el-col :span="18">
              <el-row>
                  <el-col :span="3">毕业届数</el-col>
                  <el-col :span="6">
                      <el-select v-model="userdetail.graduateyear" placeholder="请选择">
                        <el-option
                            v-for="(item, index) in graduateyear"
                            :key="index"
                            :label="item.value"
                            :value="item.value">
                        </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="3"></el-col>
                  <el-col :span="3">学号</el-col>
                  <el-col :span="6">
                      <el-input
                        placeholder="请输入内容"
                        v-model="userdetail.studentnumber"
                        clearable
                        :disabled="userdetail.studentnumber != null">
                      </el-input>
                  </el-col>
              </el-row>
              <el-row class="padding_row">
                  <el-col :span="3">姓名</el-col>
                  <el-col :span="6">
                      <el-input
                        placeholder="请输入内容"
                        v-model="userdetail.nickname"
                        clearable
                        :disabled="userdetail.nickname != null">
                      </el-input>
                  </el-col>
                  <el-col :span="3">性别</el-col>
                  <el-col :span="6">
                      <el-input
                        placeholder="请输入内容"
                        v-model="userdetail.sex"
                        clearable
                        :disabled="userdetail.sex != null">
                      </el-input>
                  </el-col>
              </el-row>
              <el-row class="padding_row">
                  <el-col :span="3">出生日期</el-col>
                  <el-col :span="6">
                      <el-date-picker
                        v-model="userdetail.birthdate"
                        type="date"
                        placeholder="选择日期">
                      </el-date-picker>
                  </el-col>
              </el-row>
              <el-row class="padding_row">
                  <el-col :span="3">学院</el-col>
                  <el-col :span="6">
                      <el-input
                        placeholder="请输入内容"
                        v-model="userdetail.college"
                        clearable
                        :disabled="userdetail.college != null">
                      </el-input>
                  </el-col>
                  <el-col :span="3">专业</el-col>
                  <el-col :span="6">
                      <el-input
                        placeholder="请输入内容"
                        v-model="userdetail.profession"
                        clearable
                        :disabled="userdetail.profession != null">
                      </el-input>
                  </el-col>
              </el-row>
              <el-row class="padding_row">
                  <el-col :span="3">班级</el-col>
                  <el-col :span="6">
                      <el-input
                        placeholder="请输入内容"
                        v-model="userdetail.classname"
                        clearable
                        :disabled="userdetail.classname != null">
                      </el-input>
                  </el-col>
                  <el-col :span="3">政治面貌</el-col>
                  <el-col :span="6">
                      <el-input
                        placeholder="请输入内容"
                        v-model="userdetail.political"
                        clearable>
                      </el-input>
                  </el-col>
              </el-row>
              <el-row class="padding_row">
                  <el-col :span="3">生源地</el-col>
                  <el-col :span="6">
                      <el-input
                        placeholder="请输入内容"
                        v-model="userdetail.familyaddress"
                        clearable>
                      </el-input>
                  </el-col>
                  <el-col :span="3">民族</el-col>
                  <el-col :span="6">
                      <el-input
                        placeholder="请输入内容"
                        v-model="userdetail.nation"
                        clearable
                        :disabled="userdetail.nation != null">
                      </el-input>
                  </el-col>
              </el-row>
              <el-row class="padding_row">
                  <el-col :span="3">身份证号</el-col>
                  <el-col :span="12">
                      <el-input
                        placeholder="请输入内容"
                        v-model="userdetail.personid"
                        clearable>
                      </el-input>
                  </el-col>
              </el-row>
              <el-row class="padding_row">
                  <el-col :span="3">学历</el-col>
                  <el-col :span="6">
                      <el-select v-model="userdetail.education" placeholder="请选择">
                        <el-option
                            v-for="(item, index) in education"
                            :key="index"
                            :label="item.value"
                            :value="item.value">
                        </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="3">手机号码</el-col>
                  <el-col :span="6">
                      <el-input
                        placeholder="请输入内容"
                        v-model="userdetail.phonenumber"
                        clearable>
                      </el-input>
                  </el-col>
              </el-row>
              <el-row class="padding_row">
                  <el-col :span="3">电子邮箱</el-col>
                  <el-col :span="6">
                      <el-input
                        placeholder="请输入内容"
                        v-model="userdetail.mail"
                        clearable>
                      </el-input>
                  </el-col>
                  <el-col :span="3">家庭电话</el-col>
                  <el-col :span="6">
                      <el-input
                        placeholder="请输入内容"
                        v-model="userdetail.familyphone"
                        clearable>
                      </el-input>
                  </el-col>
              </el-row>
              <el-row class="padding_row">
                  <el-col :span="24" style="text-align: right;
    padding-right: 25%;"><el-button type="primary" @click="updateUser">更改</el-button></el-col>
              </el-row>
          </el-col>
          <!-- <el-col :span="12">

          </el-col> -->
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'userDetail',
  data() {
      return {
          userdetail: {},
          graduateyear: [],
          education: []
      }
  },
  created() {
    this.util.post('/user/loadUserdetailByUid', {uid: localStorage.getItem('uid')}).then(res => {
        this.userdetail = res.data
    }),
    this.util.post('/user/loadCodetalbeByName', {name: 'graduateyear'}).then(res => {
        this.graduateyear = res.data
    }),
    this.util.post('/user/loadCodetalbeByName', {name: 'education'}).then(res => {
        this.education = res.data
    })
  },
  methods: {
      updateUser() {
          this.util.post('/user/updateByPrimaryKey',  this.userdetail).then(res => {
              this.$message({
                message: '恭喜你，更新成功',
                type: 'success'
              });
          });
      }
  }
}
</script>

<style scoped>
.card {
    margin: 20px;
    line-height: 38px;
    position:relative;
	animation:mymove 2s infinite;
	-webkit-animation:mymove 2s infinite; /*Safari and Chrome*/
    animation-iteration-count: 1;
    height: 40pc;
    overflow: scroll;
}
.padding_row {
    margin-top: 20px;;
}
</style>